iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 22
0
自我挑戰組

CSS 大全（第四版）閱讀筆記系列 第 22 篇

Day22【主題五：濾鏡、混合、裁切與遮罩】混合背景/裁切與遮罩

11th鐵人賽
464 瀏覽

  • 分享至 

  • xImage
    •  

一、混合背景

  • backgroubd-blend-mode屬性可將元素的背景由多張影像圖片重疊。
  • 背景圖的混合是由下到上運作的。
  • 背景是獨立（isolation）混合的。但也能透過mix-blend-mode設定混合的規則。背景獨立混合後的結果，還可以在與元素背後的東西混合。
  • 獨立混合：可打多個元素混合併視為一個整體，可以使用isolation屬性。（要設在祖先元素上）
  • 只要是元素產生堆疊的環境，不管isolation設定什麼數值，自然是獨立的。（p968）

二、裁切與遮罩

  • clip-path可以定義出一個裁切的形狀，是元素的內部區域，使用者可以看到的地方。
  • 預設值是none，不做任何裁切。
  • 裁切並不會改變元素大小，只會限制元素實際繪制的內容。
  • 裁切形狀：
  1. inset() 矩形
  2. circle() 圓形
  3. ellipse() 橢圓形
  4. polygon() 多邊形

上一篇
Day21【主題五：濾鏡、混合、裁切與遮罩】合成與混合
下一篇
Day23【主題五：濾鏡、混合、裁切與遮罩】裁切方框/裁切填充規則/遮罩
系列文
CSS 大全（第四版）閱讀筆記 共 30 篇
  1. 26
    day26【主題六：選擇器】筆記１
  2. 27
    day27【主題六：選擇器】筆記2
  3. 28
    day28【主題六：選擇器】筆記3-動態、介面狀態虛擬類別
  4. 29
    day29【主題七：邊界範圍】
  5. 30
    day30【主題八：數值與單位】
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22081 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙